<template>
  <view class="page-mine">
    <view class="header">
      <image src="~@/static/images/mine/mine-bg.png" mode="aspectFill" class="header-bg" />
    </view>
    <view class="user">
      <image :src="avatar" mode="aspectFill" class="user-avatar" />
      <view class="info">
        <view class="info-item">
          <!-- <view class="label">{{ $t('mine.昵称') }}:</view> -->
          <view class="value">{{ userInfo.nickname }}</view>
        </view>
        <view class="info-item">
          <view class="label">{{ $t('mine.邀请码') }}:</view>
          <view class="value">{{ userInfo.promoCode }}</view>
          <view class="btn" @click="handleCopy">{{ $t('mine.复制') }}</view>
        </view>
      </view>
    </view>
    <view class="option">
      <view class="title">{{ $t('mine.我的订单') }}</view>
      <view class="mine-actions grid col-5 text-center">
        <view class="action-item" @click="handleGoOrder('all')">
          <image src="~@/static/images/mine/menu01.png" mode="aspectFit" class="action-icon" />
          <text class="text">{{ $t('mine.全部') }}</text>
        </view>
        <view class="action-item" @click="handleGoOrder(1)">
          <image src="~@/static/images/mine/menu02.png" mode="aspectFit" class="action-icon" />
          <text class="text">{{ $t('mine.已审核') }}</text>
        </view>
        <view class="action-item" @click="handleGoOrder(0)">
          <image src="~@/static/images/mine/menu03.png" mode="aspectFit" class="action-icon" />
          <text class="text">{{ $t('mine.未审核') }}</text>
        </view>
        <view class="action-item" @click="handleGoOrder(-1)">
          <image src="~@/static/images/mine/menu04.png" mode="aspectFit" class="action-icon" />
          <text class="text">{{ $t('mine.未通过') }}</text>
        </view>
        <view class="action-item" @click="handleGoOrder(2)">
          <image src="~@/static/images/mine/menu05.png" mode="aspectFit" class="action-icon" />
          <text class="text">{{ $t('mine.已结算') }}</text>
        </view>
      </view>
      <view class="menu">
        <view class="menu-item" @click="handleWallet">
          <view class="item-left">
            <image src="~@/static/images/mine/option01.png" mode="aspectFit" class="menu-icon" />
            <view class="name">{{ $t('mine.我的钱包') }}</view>
          </view>
          <uni-icons type="right" size="20"></uni-icons>
        </view>
        <view class="menu-item" @click="handleCompany">
          <view class="item-left">
            <image src="~@/static/images/mine/option02.png" mode="aspectFit" class="menu-icon" />
            <view class="name">{{ $t('mine.公司简介') }}</view>
          </view>
          <uni-icons type="right" size="20"></uni-icons>
        </view>
        <view class="menu-item" @click="handleCertification">
          <view class="item-left">
            <image src="~@/static/images/mine/option03.png" mode="aspectFit" class="menu-icon" />
            <view class="name">{{ $t('mine.实名认证') }}</view>
          </view>
          <uni-icons type="right" size="20"></uni-icons>
        </view>
        <view class="menu-item" @click="handleNotice">
          <view class="item-left">
            <image src="~@/static/images/mine/option04.png" mode="aspectFit" class="menu-icon" />
            <view class="name">{{ $t('mine.公告列表') }}</view>
          </view>
          <uni-icons type="right" size="20"></uni-icons>
        </view>
        <view class="menu-item" @click="handleToSetting">
          <view class="item-left">
            <image src="~@/static/images/mine/option05.png" mode="aspectFit" class="menu-icon" />
            <view class="name">{{ $t('mine.设置') }}</view>
          </view>
          <uni-icons type="right" size="20"></uni-icons>
        </view>
      </view>
      <view class="login-out" @click="handleLogout">{{ $t('mine.退出登录') }}</view>
      <view class="version">{{ $t('mine.版本号') }}: V1.4.4</view>
    </view>
  </view>
</template>

<script>
  import config from '@/config'
  import { getInfo } from '@/api/login'
  import { isHttp, isEmpty } from '@/utils/validate'
  import defAva from '@/static/images/profile.png'

  const imgUrl = config.imgUrl
  export default {
    onShow() {
      this.getUserInfo()
    },
    data() {
      return {
        userInfo: {}
      }
    },
    onPullDownRefresh() {
      this.getUserInfo()
      uni.stopPullDownRefresh()
    },
    computed: {
      avatar() {
        let avatar = this.userInfo?.headPortrait || ''
        if (!isHttp(avatar)) {
          avatar = isEmpty(avatar) ? defAva : imgUrl + avatar
        }
        return avatar
      },
      windowHeight() {
        return uni.getSystemInfoSync().windowHeight - 50
      }
    },
    methods: {
      getUserInfo() {
        this.$modal.loading('loading', 'loading')
        getInfo()
          .then((res) => {
            this.$modal.closeLoading()
            this.userInfo = res.result?.data || {}
          })
          .catch(() => {
            this.$modal.closeLoading()
          })
      },
      //复制
      handleCopy() {
        uni.setClipboardData({
          data: this.userInfo.promoCode,
          success: () => {
            this.$modal.msgSuccess(this.$t('mine.复制成功'))
          }
        })
      },
      //跳转订单
      handleGoOrder(type) {
        this.$tab.navigateTo(`/pages/order/index?type=${type}`)
      },
      //我的钱包
      handleWallet() {
        this.$tab.navigateTo('/pages/mine/wallet/index')
      },
      //公司简介
      handleCompany() {
        this.$tab.navigateTo('/pages/mine/company/index')
      },
      //实名认证
      handleCertification() {
        this.$tab.navigateTo('/pages/mine/certification/index')
      },
      //公告列表
      handleNotice() {
        this.$tab.navigateTo('/pages/mine/notice/index')
      },
      //设置
      handleToSetting() {
        this.$tab.navigateTo('/pages/mine/setting/index')
      },
      //退出
      handleLogout() {
        this.$modal.confirm(this.$t('mine.确定注销并退出系统吗') + '?').then(() => {
          this.$store
            .dispatch('LogOut')
            .then(() => {})
            .finally(() => {
              this.$tab.reLaunch('/pages/index')
            })
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .page-mine {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100vh;
    .header-bg {
      width: 100%;
      height: 234px;
    }
    .user {
      position: absolute;
      width: 100vw;
      height: 156px;
      top: 70px;
      left: 0;
      padding: 0 26px;
      box-sizing: border-box;
      z-index: 99;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .user-avatar {
        width: 60px;
        height: 60px;
        border-radius: 100%;
      }
      .info {
        margin-left: 20rpx;
        min-width: 30%;
        .info-item {
          display: flex;
          align-items: center;
          color: #fff;
          font-size: 28rpx;
          min-height: 20px;
          .btn {
            width: 50px;
            height: 20px;
            border-radius: 5px;
            background: hsla(0, 0%, 100%, 0.7);
            line-height: 20px;
            text-align: center;
            margin-left: 10px;
            font-size: 24rpx;
            color: #666;
          }
        }
      }
    }
    .option {
      position: absolute;
      width: 100vw;
      top: 205px;
      left: 0;
      border-radius: 26px 26px 0 0;
      z-index: 99;
      box-sizing: border-box;
      background-color: #fff;
      .title {
        padding-left: 20px;
        box-sizing: border-box;
        font-weight: 700;
        margin-top: 20px;
        color: #001313;
        font-size: 24rpx;
      }
      .mine-actions {
        margin: 10rpx;
        padding: 10rpx;
        border-radius: 8px;
        background-color: white;
        border-bottom: 1px solid #dfdfdf;
        .action-item {
          .action-icon {
            width: 50rpx;
            height: 50rpx;
          }
          .text {
            display: block;
            font-size: 13px;
            margin: 8px 0px;
          }
        }
      }
      .menu {
        padding: 16px;
        .menu-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 12px 0;
          border-bottom: 1px solid #f1f1f1;
          .item-left {
            display: flex;
            align-items: center;
            .name {
              margin-left: 20rpx;
              color: #001313;
              font-size: 24rpx;
            }
          }
          .menu-icon {
            width: 50rpx;
            height: 50rpx;
          }
        }
      }
      .login-out {
        width: 95%;
        margin: 0 auto;
        border-radius: 30px;
        border: 1px solid #e8e9f2;
        padding: 10px 0;
        text-align: center;
        color: #001313;
        font-size: 26rpx;
      }
      .version {
        color: #999;
        font-size: 28rpx;
        text-align: center;
        margin-top: 40rpx;
      }
    }
  }
</style>
